import { getPurchaseOrderByPage, addPurchaseOrder, updatePurchaseOrder, delPurchaseOrder, exportPurchaseOrder } from '@/services/material/purchaseOrder';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
const PurchaseOrder: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
    const ref = useRef(null);
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: '到货日期',
          dataIndex: 'deliveryDate',
        },
        {
          title: '唯一标识',
          dataIndex: 'identification',
        },
        {
          title: '审核标志',
          dataIndex: 'isAudit',
        },
        {
          title: '是否全部到货',
          dataIndex: 'isClosed',
        },
        {
          title: '开工日期',
          dataIndex: 'kickoffDate',
        },
        {
          title: '备注',
          dataIndex: 'memo',
        },
        {
          title: '订单状态',
          dataIndex: 'postate',
        },
        {
          title: '采购单号',
          dataIndex: 'po',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
        },
        {
          title: '采购预警',
          dataIndex: 'purchaseAlerts',
        },
        {
          title: '采购时间',
          dataIndex: 'purchaseTime',
        },
        {
          title: '采购员',
          dataIndex: 'purchaser',
        },
        {
          title: '销售订单号',
          dataIndex: 'so',
        },
        {
          title: '销售订单行',
          dataIndex: 'soitem',
        },
        {
          title: '供应商名称',
          dataIndex: 'supplier',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        deliveryDate: record.deliveryDate,
        identification: record.identification,
        isAudit: record.isAudit,
        isClosed: record.isClosed,
        kickoffDate: record.kickoffDate,
        memo: record.memo,
        postate: record.postate,
        po: record.po,
        projectName: record.projectName,
        purchaseAlerts: record.purchaseAlerts,
        purchaseTime: record.purchaseTime,
        purchaser: record.purchaser,
        so: record.so,
        soitem: record.soitem,
        supplier: record.supplier,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delPurchaseOrder({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async (values) => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addPurchaseOrder(values);
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updatePurchaseOrder(values);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper title={false} breadcrumb={undefined}>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
                <Button
                        key="button"
                        icon={<PlusOutlined />}
                onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportPurchaseOrder({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `PurchaseOrder.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
                });
                }}
                type="primary"
                >
                导出
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getPurchaseOrderByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />

    <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
        destroyOnClose: true,
        onCancel: () => {
            setModalVisit(false);
        },
        }}
    >
        <ProFormText  name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText  name="deliveryDate" label="到货日期"
                 rules={[{ required: true, message: 'Please input your deliveryDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="identification" label="唯一标识"
                 rules={[{ required: true, message: 'Please input your identification!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="isAudit" label="审核标志"
                 rules={[{ required: true, message: 'Please input your isAudit!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="isClosed" label="是否全部到货"
                 rules={[{ required: true, message: 'Please input your isClosed!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="kickoffDate" label="开工日期"
                 rules={[{ required: true, message: 'Please input your kickoffDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="memo" label="备注"
                 rules={[{ required: true, message: 'Please input your memo!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="postate" label="订单状态"
                 rules={[{ required: true, message: 'Please input your postate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="po" label="采购单号"
                 rules={[{ required: true, message: 'Please input your po!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="projectName" label="项目名称"
                 rules={[{ required: true, message: 'Please input your projectName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="purchaseAlerts" label="采购预警"
                 rules={[{ required: true, message: 'Please input your purchaseAlerts!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="purchaseTime" label="采购时间"
                 rules={[{ required: true, message: 'Please input your purchaseTime!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="purchaser" label="采购员"
                 rules={[{ required: true, message: 'Please input your purchaser!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="so" label="销售订单号"
                 rules={[{ required: true, message: 'Please input your so!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="soitem" label="销售订单行"
                 rules={[{ required: true, message: 'Please input your soitem!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="supplier" label="供应商名称"
                 rules={[{ required: true, message: 'Please input your supplier!' }]}
        disabled={createOrUpdate}  />
    </ModalForm>
  </PageHeaderWrapper>
  );
  };
  export default PurchaseOrder;
